import React from 'react';
import {Dimensions, FlatList, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';

const {width, height} = Dimensions.get('window');

let selectedCount = 0;
export default class CircleNum extends React.Component {

    /**
     * 属性信息包含： title，data:[{id,data,desc,selected,disabled}],minSelected,maxSelected，single（单选）
     * 回调有： onPress  onSelected
     * @param props
     */
    constructor(props) {
        super(props);
        this.initData = JSON.parse(JSON.stringify(props.data));
        props.data.forEach(item => {
            if (item.selected) {
                selectedCount++;
            }
        });
        this.state = props;
    }

    render() {
        return (
            <View style={{
                backgroundColor: 'white',
                borderBottomWidth: 1,
                borderStyle: 'solid',
                borderBottomColor: '#e3e3e3',
                borderBottom: 1,
            }}>
                <View
                    style={{
                        padding: 10,
                        borderBottomWidth: 1,
                        borderStyle: 'solid',
                        borderBottomColor: '#e3e3e3',
                        borderBottom: 1,
                    }}>
                    <Text>{this.props.title}</Text>
                </View>
                <View style={{paddingLeft: 5, paddingRight: 5, paddingTop: 10}}>
                    <FlatList data={this.state.data} horizontal={true} extraData={this.state}
                              renderItem={this._renderNumCircle}/>
                </View>
            </View>
        );
    }

    reset = () => {
        let self = this;
        self.initData.forEach(item => {
            item.selected = false;
        })
        this.setState({
            data: self.initData
        })
    };
    refreshData = (data) => {
        this.setState({
            data: data
        })
    }
    _renderNumCircle = (data) => {
        let item = data.item;
        let cirDiameter = (width - 10) / 11;
        let pdl = ((width - 10) - (cirDiameter * 10)) / 10;

        return (
            <View style={{flex: 1, marginLeft: pdl}}>
                <TouchableOpacity onPress={() => {
                    this._onItemPress(item);
                }}>
                    <View style={[item.selected && styles.circleSelected, {
                        width: cirDiameter,
                        height: cirDiameter,
                        borderWidth: 1,
                        borderStyle: 'solid',
                        borderColor: '#bfbfbf',
                        borderRadius: 50,
                        textAlign: 'center',
                        alignItems: 'center',
                        marginBottom: 2,
                    }]}>
                        <Text
                            style={[item.selected ? styles.selectedCircleNum : styles.circleNum, {lineHeight: cirDiameter}]}>{item.data}</Text>
                    </View>
                </TouchableOpacity>
                <View style={{width: cirDiameter, alignItems: 'center', paddingTop: 6, paddingBottom: 8}}>
                    <Text style={{color: '#c4c4c4'}}>{item.desc}</Text>
                </View>
            </View>
        );
    };
    _onItemPress = (item) => {
        if (item.disabled) {
            return;
        }
        if (this.state.maxSelected > 0 && !item.selected && this.state.maxSelected === selectedCount) {
            alert('最多只能选择' + selectedCount + '个');
            return;
        }
        if (!item.selected) {
            selectedCount++;
            this.props.onSelected && this.props.onSelected(item);
        } else {
            selectedCount--
        }
        let data = this.state.data;
        let index = data.indexOf(item);
        item.selected = !item.selected;

        if (this.props.single) {
            data.forEach((item, i) => {
                if (i !== index) {
                    item.selected = false;
                }
            });
        }

        data[index] = item;
        this.setState({
            data: data,
        });
        this.props.onPress && this.props.onPress(item);
    };
    getSelected = () => {
        let selected = [];
        this.state.data.forEach(item => {
            if (item.selected) {
                selected.push(item);
            }
        });
        return selected;
    };
}
const styles = StyleSheet.create({
    selectedCircleNum: {
        color: 'white',
    },
    circleNum: {
        color: '#e30e27',
    },
    circleSelected: {
        backgroundColor: '#e30e27',
    },
});
